<!-- 使用例子：
<jp-grid :grid-list="appMenuList" :col="4" @click="gridClick"></jp-grid>

gridClick(item, index) {
	if (item.url) {
		uni.navigateTo({
			url: item.url
		})
	} else {
		uni.showToast({
			icon: 'none',
			title: '功能建设中，敬请期待'
		})
	}
}, -->
<template>
	<view class="jp-flex-wrap">
		<view class="grid-item jp-flex-column jp-cross-center" :class="[`grid-item-${col}`]"
			v-for="(item, index) in gridList" :key="index" @click="gridClick(item, index)">
			<view class="icon-bg" :style="iconBgStyle">
				<view class="icon">
					<slot :row="item" :index="index">
						<image :src="item[keyIcon]" mode="" :style="iconStyle"></image>
					</slot>
					<text class="tips" v-if="showTip && item[keyTips]" v-text="item[keyTips]"></text>
				</view>
			</view>
			<text class="title" v-text="item[keyName]"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'jp-grid',
		props: {
			col: { //每行显示格子数，可选值[2,5]，默认3
				type: Number,
				default: 3,
			},
			gridList: {
				type: Array,
				default: () => []
			},
			showTip: { //格子菜单的数字角标(默认显示)
				type: Boolean,
				default: true
			},
			keyName: {
				type: String,
				default: 'name'
			},
			keyIcon: {
				type: String,
				default: 'icon'
			},
			keyTips: {
				type: String,
				default: 'tips'
			},
			iconSize: {
				type: String,
				default: '64rpx'
			},
			iconBgStyle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				iconStyle: '',
				dataSource: [],
			}
		},
		created() {
			this.dataSource = this.gridList
			this.iconStyle = `width: ${this.iconSize};height: ${this.iconSize};background-size: 100%;`
		},
		watch: {
			gridList: {
				handler(newVal) {
					console.warn('【jp-grid】watch gridList')
					this.dataSource = this.newVal
				},
				deep: true
			}
		},
		methods: {
			gridClick(item, index) { //格子菜单点击事件
				this.$emit("click", item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.grid-item {
		padding: 24rpx 0;
		.icon-bg {
			background-color: transparent;
			.icon {
				position: relative;
			
				.tips {
					position: absolute;
					right: -8rpx;
					top: -8rpx;
					border-radius: 18rpx;
					font-size: 24rpx;
					min-width: 36rpx;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 8rpx;
					text-align: center;
					background-color: rgba(255, 82, 65, 1);
					color: rgba(255, 255, 255, 1);
					z-index: 10;
				}
			}
		}
	
		.title {
			font-size: 28rpx;
			margin-top: 8rpx;
			color: $text-main;
		}
	}

	@for $i from 2 through 5 {
		.grid-item-#{$i} {
			width: calc(100% / #{$i});
		}
	}
</style>